<template>
	<Tab :list="list" v-if="list.length>0"

	normalFontSize="26rpx" 
	boldFontSize="34rpx" 
	gap="30rpx"
	:isCenter="true"
	:isBlod="false"  style="height: 600rpx;background-color: white;padding: 20rpx 40rpx;">
	<template #top-right="obj">
		<view style="display: flex;align-items: center;">
			<view style="color: #000;font-weight: bold;">完整榜单</view>
			<Icon href="jiantouzuo" size="30rpx"/>
		</view>
	</template>
	
	<template #tab-0="obj">
			<swiper class="swiper"    :autoplay="false" @change="changeSwiper"
						:duration="400" :next-margin="nextMargin">
						<swiper-item v-for="item,index in 4" class="scroll__wrapper">
							<Book v-for="book,i in 4" :index="(index*4+i+1)"/>
						</swiper-item>
			</swiper>
	</template>
	</Tab>
</template>

<script setup>
	import Tab from '@/common/components/Tab/index.vue';
	import Icon from '@/common/components/Icon/index.vue';
	import Book from '@/components/Book/index.vue';
	import {ref} from 'vue';
	const props = defineProps({
		list:{
			type:Array,
			default:[],
		}
	})
	const nextMargin = ref("200rpx")
	function changeSwiper(e){
		if(e.detail.current==3){
			nextMargin.value="0rpx";
		}else {
			nextMargin.value="200rpx";
		}
	}
</script>

<style lang="scss">
	.swiper{
		height: 460rpx;
	}
	.scroll__wrapper{
		display: grid;
		width: 70%;
		grid-auto-flow: column;
		grid-template-rows: repeat(4,1fr);
		gap: 20rpx;
	}

</style>